<!--自定义图标-->
<script setup lang="ts">
import {computed, getCurrentInstance} from 'vue'

// 获取 Vue 实例
const instance = getCurrentInstance()

const props = defineProps({
  name: String, // 传入的图标名称
  size: {
    type: [String, Number],
    default: 24
  },
  color: {
    type: String,
    default: 'currentColor'
  }
})

// 访问全局图标库
const icons = instance?.appContext.config.globalProperties.$icons || {}

// 计算要渲染的图标
const IconComponent = computed(() => icons[props.name] || null)
</script>

<template>
  <n-icon v-if="IconComponent" :size="size" :color="color">
    <component :is="IconComponent"/>
  </n-icon>
  <span v-else>⚠️ </span>
</template>
